<template>
<div>
<div class="section" :style="{'height':offsetheight+'px'}">
	<div class="container1" :style="{'transform': 'translate3d(0px,-'+ parseFloat(fullPage*offsetheight).toFixed(2) +'px, 0px)'}">

		<div :style="{'height':offsetheight+'px'}">
			<Shipin></Shipin>
			<!-- 123 -->
		</div>
		<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">
			<img src="https://img.hidlq.com/image/cuanyue/a1.png" 
			:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >

			<!-- 产品优势 -->
			<transition
			  name="fadeDownBig"
			>
			<div class="a1"
			v-if="fullPage == 1"
			:style="{'top' : offsetheight * 0.5 + 50 + 'px', 'left' : offsetwidth * 0.5 - 250 + 'px'}"
			>
				<img :src="pinpaiyoushiImgs.chanpinyoushi" 
				width="140" height="170" 
				@mouseenter="enter('chanpinyoushi')" @mouseleave="leave('chanpinyoushi')"
				>
				
			</div>
			</transition>

			<!-- vi -->
			<transition
			  name="fadeDownBig"
			>
			<div class="a1"
			v-if="fullPage == 1"
			:style="{'top' : offsetheight * 0.5 + 50 + 'px', 'left' : offsetwidth * 0.5 - 70 + 'px'}"
			>
				<img :src="pinpaiyoushiImgs.visheji" 
				width="140" height="170" 
				@mouseenter="enter('visheji')" @mouseleave="leave('visheji')"
				>
				
			</div>
			</transition>

			<!-- 空间展示 -->
			<transition
			  name="fadeDownBig"
			>
			<div class="a1"
			v-if="fullPage == 1"
			:style="{'top' : offsetheight * 0.5 + 50 + 'px', 'left' : offsetwidth * 0.5 + 110 + 'px'}"
			>
				<img :src="pinpaiyoushiImgs.kongjianzhanshi" 
				width="140" height="170" 
				@mouseenter="enter('kongjianzhanshi')" @mouseleave="leave('kongjianzhanshi')"
				>
				
			</div>
			</transition>


			<transition
			  name="fadeUpBig"
			>
			<div class="a1_1 h2 pointer"
			v-if="fullPage == 1"
			:style="{'top' : offsetheight * 0.5 + 50 + 180 + 'px', 'left' : offsetwidth * 0.5 - 250 + 34 + 'px'}"
			@click="chanpinyoushi"
			>
				产品优势
				
			</div>
			</transition>

			<transition
			  name="fadeUpBig"
			>
			<div class="a1_2 h2 pointer"
			v-if="fullPage == 1"
			:style="{'top' : offsetheight * 0.5 + 50 + 180 + 'px', 'left' : offsetwidth * 0.5 - 24 + 'px'}"
			@click="visheji"
			>
				vi设计
				
			</div>
			</transition>

			<transition
			  name="fadeUpBig"
			>
			<div class="a1_3 h2 pointer"
			v-if="fullPage == 1"
			:style="{'top' : offsetheight * 0.5 + 50 + 180 + 'px', 'left' : offsetwidth * 0.5 + 250 - 104 + 'px'}"
			@click="kongjianzhanshi"
			>
				空间展示
				
			</div>
			</transition>
		</div>
		<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">
			<img src="https://img.hidlq.com/image/cuanyue/a2.png" 
			:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >
			<transition
			  name="fadeLeftBig"
			>
			<div class="a2"
			v-if="fullPage == 2"
			:style="{'top' : offsetheight * 0.5 - 20 + 'px', 'left' : offsetwidth * 0.25 + 20 + 'px'}"
			>
				<div class="pointer"
				@click="cuanyueqiyebeijing"
				>
					企业背景
				</div>
				<div style="background:red;width:100px;height:1px;"></div>
				<div  class="pointer"
				@click="quanguowangluo"
				>
					全国网络
				</div>
				<div style="background:red;width:100px;height:1px;"></div>
				<div  class="pointer"
				@click="wanshantuandui"
				>
					完善团队
				</div>
				<div style="background:red;width:100px;height:1px;"></div>
				<div  class="pointer"
				@click="zhongyanggongchang"
				>
					中央工厂
				</div>
				
			</div>
			</transition>
		</div>

		<!-- 招商加盟 -->
		<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">
			<img src="https://img.hidlq.com/image/cuanyue/a3.png" 
			:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >

			<!-- 加盟支持 -->
			<!-- <transition
			  name="bounceLeft"
			> -->
			<div class="a3 pointer"
			@click="jiamengzhichi"
			v-if="fullPage == 3"
			@mouseenter="enter('jiamengzhichi')" @mouseleave="leave('jiamengzhichi')"
			:style="{'top' : offsetheight * 0.5 - 180 - 10 + 'px', 'left' : offsetwidth * 0.7 - 240 - 10 + 'px'}"
			>
				<img :src="zhaoshangjiamengImgs.jiamengzhichi" width="240" height="180">
				
			</div>
			<!-- </transition> -->

			<!-- 加盟流程 -->
			<!-- <transition
			  name="bounceLeft"
			> -->
			<div class="a3 pointer"
			@click="jiamengliucheng"
			v-if="fullPage == 3"
			@mouseenter="enter('jiamengliucheng')" @mouseleave="leave('jiamengliucheng')"
			:style="{'top' : offsetheight * 0.5 - 180 - 10 + 'px', 'left' : offsetwidth * 0.7 + 10 + 'px'}"
			>
				<img :src="zhaoshangjiamengImgs.jiamengliucheng" width="240" height="180">
				
			</div>
			<!-- </transition> -->

			<!-- 合作要求 -->
			<!-- <transition
			  name="bounceRight"
			> -->
			<div class="a3 pointer"
			@click="hezuoyaoqiu"
			v-if="fullPage == 3"
			@mouseenter="enter('hezuoyaoqiu')" @mouseleave="leave('hezuoyaoqiu')"
			:style="{'top' : offsetheight * 0.5 + 10 + 'px', 'left' : offsetwidth * 0.7 - 240 - 10 + 'px'}"
			>
				<img :src="zhaoshangjiamengImgs.hezuoyaoqiu" width="240" height="180">
				
			</div>
			<!-- </transition> -->

			<!-- 合作费用 -->
			<!-- <transition
			  name="bounceRight"
			> -->
			<div class="a3 pointer"
			@click="hezuofeiyong"
			v-if="fullPage == 3"
			@mouseenter="enter('hezuofeiyong')" @mouseleave="leave('hezuofeiyong')"
			:style="{'top' : offsetheight * 0.5 + 10 + 'px', 'left' : offsetwidth * 0.7 + 10 + 'px'}"
			>
				<img :src="zhaoshangjiamengImgs.hezuofeiyong" width="240" height="180">
				
			</div>
			<!-- </transition> -->

		</div>
		<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">
			<img src="https://img.hidlq.com/image/cuanyue/a4.jpg" 
			:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >
			<transition
			  name="fadeLeftBig"
			>
			<div class="a4_l_1 pointer"
			v-if="fullPage == 4"
			:style="{
				'top' : offsetheight * 0.5 - 150 + 20 + 'px', 
				'left' : offsetwidth * 0.2 + 'px',
				'width' : offsetwidth * 0.4 - 10 + 'px',
			}"
			@click="xinwenxiangqiang(qiyezixundata[0].id)"
			>
				<div class="shuzi hui fl">01</div>
				<div class="h2 fl white" 
				:style="{'width' : offsetwidth * 0.4 - 100 + 'px'}"
				>
					{{qiyezixundata[0].title}}
				</div>
			</div>
			</transition>

			<transition
			  name="fadeLeftBig"
			>
			<div class="a4_l_2 pointer"
			v-if="fullPage == 4"
			:style="{
				'top' : offsetheight * 0.5 - 24 + 'px', 
				'left' : offsetwidth * 0.2 + 'px',
				'width' : offsetwidth * 0.4 - 10 + 'px',
			}"
			@click="xinwenxiangqiang(qiyezixundata[1].id)"
			>
				<div class="shuzi hui fl">02</div>
				<div class="h2 fl white" 
				:style="{'width' : offsetwidth * 0.4 - 100 + 'px'}"
				>
					{{qiyezixundata[1].title}}
				</div>
			</div>
			</transition>

			<transition
			  name="fadeLeftBig"
			>
			<div class="a4_l_3 pointer"
			v-if="fullPage == 4"
			:style="{
				'top' : offsetheight * 0.5 + 150 - 80 + 'px', 
				'left' : offsetwidth * 0.2 + 'px',
				'width' : offsetwidth * 0.4 - 10 + 'px',
			}"
			@click="xinwenxiangqiang(qiyezixundata[2].id)"
			>
				<div class="shuzi hui fl">03</div>
				<div class="h2 fl white" 
				:style="{'width' : offsetwidth * 0.4 - 100 + 'px'}"
				>
					{{qiyezixundata[2].title}}
				</div>
			</div>
			</transition>

			<transition
			  name="fadeDownBig"
			  
			>
			<div class="a4 pointer"
			v-if="fullPage == 4"
			@click="qiyezixun"
			:style="{'top' : offsetheight * 0.5 - 150 - 10 + 'px', 'left' : offsetwidth * 0.6 + 'px'}"
			>
				<img src="https://img.hidlq.com/image/cuanyue/a4-1.png" height="150">
				
			</div>
			</transition>

			<transition
			  name="fadeUpBig"
			  
			>
			<div class="a4 pointer"
			v-if="fullPage == 4"
			@click="shichanghuodong"
			:style="{'top' : offsetheight * 0.5 + 10 + 'px', 'left' : offsetwidth * 0.6 + 'px'}"
			>
				<img src="https://img.hidlq.com/image/cuanyue/a4-2.png" height="150">
				
			</div>
			</transition>
		</div>
		<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">
			<img src="https://img.hidlq.com/image/cuanyue/a5.gif" 
			:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >
		</div>
		<div class="a" :style="{'width':offsetwidth+'px', 'height':offsetheight+'px'}">
			<img src="https://img.hidlq.com/image/cuanyue/a6.png" 
			:style="{'height':offsetheight+'px', 'transform': 'translate3d(-' + offsetX + 'px, 0px, 0px)'}"  >

			<transition
			  name="bounce"
			  enter-active-class="bounceInUp"
			  leave-active-class="bounceOutDown"
			>
			<div class="a6"
			v-if="fullPage == 6"
			:style="{'top' : offsetheight * 0.5 - 170 + 'px', 'left' : (offsetwidth - 800) * 0.5 + 'px'}"
			>
				<img src="https://img.hidlq.com/image/cuanyue/a6-1.png" width="800">
				
			</div>
			</transition>

		</div>

		<!-- <div v-for="i in bannerList" :style="{'height':offsetheight+'px','background':i.bg}">

		</div> -->
	</div>
	<!-- <div class="fixed-list">
		<div v-for="(i,index) in bannerList" :class="fullPage==index?'color':''" @click="pageInfo(index)">
		</div>
	</div> -->
</div>

</div>
</template>

<script>

import { mapGetters } from 'vuex'
import Shipin from './shipin'
require('vue2-animate/dist/vue2-animate.min.css')
import { qiyezixun, shichanghuodong } from './data'

export default {
	
	name : 'cuanyueslider',
	
	data () {
		return {
		  	bannerList:[                 //盒子背景颜色
				{
					bg:"#f6f6f6"
				},
				{
					bg:"#87d9e1"
				},
				{
					bg:"#8185d7"
				},
				{
					bg:"#e187cf"
				}
			],
			offsetheight : document.documentElement.clientHeight - 60,    //获取当前页面的高度
			offsetwidth:document.documentElement.clientWidth,    //获取当前页面的高度
			fullPage : this.$route.query.what == undefined ? 0 : this.$route.query.what - 1,           //当前在第几页
			fullPageNum:false,        //是否在滑动

			what : this.$route.query.what,
			size : 7,
			imgWidth : 1400,
			imgHeight : 500,

			items : ['11111', '2222', '3333', '44444'],

			show : true,

			qiyezixundata : qiyezixun,


			pinpaiyoushiImgs : {
				'chanpinyoushi' : 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/chanpinyoushi.png',
				'visheji' : 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/vi.png',
				'kongjianzhanshi' : 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/kongjianzhanshi.png',
			},


			zhaoshangjiamengImgs : {
				'jiamengzhichi' : 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/jiamengzhichi.png',
				'jiamengliucheng' : 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/jiamengliucheng.png',
				'hezuoyaoqiu' : 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/hezuoyaoqiu.png',
				'hezuofeiyong' : 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/hezuofeiyong.png',
			}
		}
	},

	props : {

	},

	components : {
		Shipin,
	},

	computed : {
		...mapGetters([
			
		]),

		bili () {
			return this.offsetheight / this.imgHeight;
		},

		offsetX () {
			return (this.imgWidth * this.bili - this.offsetwidth) * 0.5;
		},

		dlq1 () {
			setTimeout(() => {

			},500);
		}
	},

	methods : {
		//
		//点击左侧小点时跳转到相应的page
		//
		pageInfo(index){
			this.fullPage=index;
		},
		//
		//鼠标事件
		//
		scroll(e){

			e=e || window.event;
			//
			//是否正在滑动
			//
            if(this.fullPageNum){
                return false;
            }
            //
            //   e.wheelDelta为负数时向下滑动
            //
            if(e.wheelDelta<0){
                if(this.fullPage >= this.size - 1){
                    return false
                }
                this.fullPageNum=true;
                this.pageInfo(this.fullPage+1);
                //
                //  css设置动画事件为1000，所以等到1000ms后滚动状态为false
                //
                setTimeout(()=>{
                	this.fullPageNum=false;
                },1500)
            //
            //   否则就是向上划
            //
            }else{
                if(this.fullPage<=0){
                    return false;
                }
                this.fullPageNum=true;
                this.pageInfo(this.fullPage-1);
                setTimeout(()=>{
                	this.fullPageNum=false;
                },1500)
            }
		},

		gogo () {
			this.show = !this.show;
		},

		//废弃
		liaojiejiameng () {
			console.log('liaojiejiameng');
			this.$router.push({
	    		'name' : 'cuanyuezhaoshangjiameng',
	    		'query' : {'what' : 'jiamengzhichi'}
	    	});
		},

		//废弃
		jiamengxingshi () {
			console.log('hezuoyaoqiu');
			this.$router.push({
	    		'name' : 'cuanyuezhaoshangjiameng',
	    		'query' : {'what' : 'hezuoyaoqiu'}
	    	});
		},


		//加盟支持
		jiamengzhichi () {
			this.$router.push({
	    		'name' : 'cuanyuezhaoshangjiameng',
	    		'query' : {'what' : 'jiamengzhichi'}
	    	});
		},


		//加盟流程
		jiamengliucheng () {
			this.$router.push({
	    		'name' : 'cuanyuezhaoshangjiameng',
	    		'query' : {'what' : 'jiamengliucheng'}
	    	});
		},

		//合作要求
		hezuoyaoqiu () {
			this.$router.push({
	    		'name' : 'cuanyuezhaoshangjiameng',
	    		'query' : {'what' : 'hezuoyaoqiu'}
	    	});
		},

		//合作费用 
		hezuofeiyong () {
			this.$router.push({
	    		'name' : 'cuanyuezhaoshangjiameng',
	    		'query' : {'what' : 'hezuofeiyong'}
	    	});
		},

		qiyezixun () {
			this.$router.push({
	    		'name' : 'cuanyuexinwenzixun',
	    		'query' : {'what' : 'qiyezixun'}
	    	});
		},


		shichanghuodong () {
			this.$router.push({
	    		'name' : 'cuanyuexinwenzixun',
	    		'query' : {'what' : 'shichanghuodong'}
	    	});
		},

		xinwenxiangqiang (id) {
			this.$router.push({
	    		'name' : 'cuanyuexinwenxiangqing',
	    		'query' : {'what' : 'qiyezixun', 'id' : id}
	    	});
		},

		cuanyueqiyebeijing () {
			this.$router.push({
	    		'name' : 'cuanyueqiyebeijing',
	    	})
		},

		quanguowangluo () {
			this.$router.push({
	    		'name' : 'cuanyuequanguowangluo',
	    	})
		},

		wanshantuandui () {
			this.$router.push({
	    		'name' : 'cuanyuewanshantuandui',
	    	})
		},

		zhongyanggongchang () {
			this.$router.push({
	    		'name' : 'cuanyuezhongyanggongchang',
	    	})
		},

		chanpinyoushi () {
			this.$router.push({
	    		'name' : 'cuanyuechanpinyoushi',
	    	})
		},

		visheji () {
			this.$router.push({
	    		'name' : 'cuanyuevisheji',
	    	})
		},

		kongjianzhanshi () {
			this.$router.push({
	    		'name' : 'cuanyuekongjianzhanshi',
	    	})
		},


		pinpaiyoushiEnter () {
			console.log('enter')
		},

		pinpaiyoushiLeave () {
			console.log('leave')
		},

		enter (what) {
			if(what == 'jiamengzhichi'){
				this.zhaoshangjiamengImgs.jiamengzhichi = 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/jiamengzhichi-2.png';
			}else if(what == 'jiamengliucheng'){
				this.zhaoshangjiamengImgs.jiamengliucheng = 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/jiamengliucheng-2.png';
			}else if(what == 'hezuoyaoqiu'){
				this.zhaoshangjiamengImgs.hezuoyaoqiu = 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/hezuoyaoqiu-2.png';
			}else if(what == 'hezuofeiyong'){
				this.zhaoshangjiamengImgs.hezuofeiyong = 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/hezuofeiyong-2.png';
			}else if(what == 'chanpinyoushi'){
				this.pinpaiyoushiImgs.chanpinyoushi = 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/chanpinyoushi-2.png';
			}else if(what == 'visheji'){
				this.pinpaiyoushiImgs.visheji = 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/vi-2.png';
			}else if(what == 'kongjianzhanshi'){
				this.pinpaiyoushiImgs.kongjianzhanshi = 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/kongjianzhanshi-2.png';
			}
		},

		leave (what) {
			if(what == 'jiamengzhichi'){
				this.zhaoshangjiamengImgs.jiamengzhichi = 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/jiamengzhichi.png';
			}else if(what == 'jiamengliucheng'){
				this.zhaoshangjiamengImgs.jiamengliucheng = 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/jiamengliucheng.png';
			}else if(what == 'hezuoyaoqiu'){
				this.zhaoshangjiamengImgs.hezuoyaoqiu = 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/hezuoyaoqiu.png';
			}else if(what == 'hezuofeiyong'){
				this.zhaoshangjiamengImgs.hezuofeiyong = 'https://img.hidlq.com/image/cuanyue/zhaoshangjiameng/hezuofeiyong.png';
			}else if(what == 'chanpinyoushi'){
				this.pinpaiyoushiImgs.chanpinyoushi = 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/chanpinyoushi.png';
			}else if(what == 'visheji'){
				this.pinpaiyoushiImgs.visheji = 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/vi.png';
			}else if(what == 'kongjianzhanshi'){
				this.pinpaiyoushiImgs.kongjianzhanshi = 'https://img.hidlq.com/image/cuanyue/pinpaiyoushi/kongjianzhanshi.png';
			}
		},
	},

	watch : {
	    $route(){
        	this.fullPage = this.$route.query.what - 1;
      	},
	},

	mounted () {
		if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',this.scroll,false);
        }
        window.onmousewheel=document.onmousewheel=this.scroll;
	},

}
</script>

<style scoped>

* {
	padding: 0px;
	margin: 0px;
}

.section{
	overflow: hidden;
}
.container1{
	width: 100%;
	height: 100%;
	position: relative; 
	transform: translate3d(0px, 0px, 0px); 
	transition: all 1000ms ease;
}

.container1 div{
	overflow: hidden;
}

.fixed-list{
	position: fixed;
	top: 40%;
	right: 20px;
}

.fixed-list	div{
	width: 20px;
	height: 20px;
	background:#ccc;
	border-radius: 50%;
	margin-bottom: 20px;
}
.fixed-list	div.color{
	background:#000;
}

.a {
	position: relative;
}

.a1 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}

.a1_1 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}
.a1_2 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}
.a1_3 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}

.a2 {
	position: absolute;
	/*top: 270px;
	left: 340px;*/
	color: red;
	animation-delay: 0.5s;
	animation-duration: 0.75s;
}

.a2 div {
	margin-top: 20px;
	font-size: 24px;
}


.a3 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}

.a4 {
	position: absolute;
	animation-delay: 0.5s;
	animation-duration: 1s;
}

.a4_l_1 {
	position: absolute;
	animation-delay: 0.5s;
	animation-duration: 1s;
	width: 500px;
}

.a4_l_2 {
	position: absolute;
	animation-delay: 0.75s;
	animation-duration: 1s;
}

.a4_l_3 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}

.shuzi {
	font-size: 48px;
	width: 70px;
}


.a6 {
	position: absolute;
	animation-delay: 1s;
	animation-duration: 1s;
}

</style>
